<template>
	<div class="gallary" @click="handleClickGallary">
		<div class="wrapper">
			<swiper :options="swiperOption">
			  <swiper-slide v-for="(item,index) in imgs" :key="index">
			  	<img class="gallary-img" :src="item">
			  </swiper-slide>
			  <div class="swiper-pagination"  slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Gallary',
	props: {
		imgs: Array
	},
	data () {
		return {
			swiperOption: {
				pagination: '.swiper-pagination',
				paginationType: 'fraction',
        observeParents: true,
        observer: true
			}
		}
	},
	methods: {
		handleClickGallary () {
			this.$emit('close')
		}
	}
}
</script>

<style lang="stylus" scoped="">
.gallary >>> .swiper-container
	overflow: inherit
.gallary
	position: fixed
	top:0
	left: 0
	right: 0
	bottom: 0
	background: #000
	display: flex
	flex-direction: column
	justify-content: center
	z-index: 9
	.wrapper
		width: 100%
		height:0
		padding-bottom: 100%
	.gallary-img
		width: 100%
	.swiper-pagination
		bottom:-1rem
		color:#fff
</style>